<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
<!--            rid-template-rows: auto 1fr;   /* 图片区域自适应高度，文字区域填充剩余空间 */-->
<!--            gap: 20px;-->
<!--            max-width: 1200px;-->
<!--            margin: 20px auto;-->
            background: red
            padding: 10px;
        }

        h2 {
            text-align: center;
            font-family: "楷体";

        }

        .img {

              grid-column: 2;
<!--              background: blue;-->
              padding-left: 2px;
              padding-right: 1px;
            }

        .text {
          grid-column: 1;
          grid-row: 1;
<!--          background: #36CFB4;-->

        }

        p {
            text-indent: 2em;
            font-family: "楷体";
            font-size: 23px;
            color: #176EFF

        }

    </style>

</head>
<body>
    <h2>人物关系网</h2>

    <div class="grid">
        <div class="text">

            <p>
                在三国风云中，各方势力与人物关系错综复杂。这张人物关系图，为我们清晰梳理了蜀汉、曹魏、东吴三大阵营的人物架构与关联。
                图以三国为三大主干分支，直观呈现三国鼎立格局。每个国家分支下又细分武将与文官两类，契合当时文武并重、各司其职的时代特征。
            </p>
            <p>
                蜀汉以刘备为核心，文官中诸葛亮智慧超群，与刘备君臣相得；庞统、法正等谋士也各有建树。武将方面，五虎上将关羽、张飞等武艺高强、忠义无双，为蜀汉立下赫赫战功。
                曹魏以曹操为中心，文官荀彧、郭嘉等足智多谋，为曹操统一北方出谋划策；武将夏侯惇、张辽等能征善战，随曹操南征北战。
                东吴以孙权为首，周瑜指挥赤壁之战奠定鼎立基础，鲁肃深谋远虑，吕蒙智取荆州，陆逊夷陵之战大败刘备。
            </p>
            <p>
                此图不仅展现三国势力构成，更助我们理解人物间的上下级、同僚关系与利益纠葛，让我们能更深入感受那个英雄辈出时代的魅力。
            </p>


        </div>

        <div class="img">

            <iframe
              src="./人物关系图.html"
              width="1000px"
              height="630px"
              frameborder="0"
              style="border:none;"
            ></iframe>

        </div>
    </div>
</body>
</html>